<!-- <script>
  //选中一段代码，按ctrl+?注释
  //写数据,在这里不能再用createApp({data(){return{}}})
  //第一种写法，选项API
  export default{//导出一个对象
    data(){//声明响应式对象
      return{
        msg:'上海'
      }
    },
    methods:{//声明方法

    },
    mounted(){//声明钩子函数

    }
  }
</script> -->
<script setup>
//第二种写法，组合式api,推荐，script标签中必须加setup，告诉vue需要进行一些处理让我们可以更简洁的使用组合式api
import {onMounted, ref} from 'vue'
//调用ref函数，定义响应式数据：和页面相互绑定(data)
//ref():接受一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性：value

const msg=ref("西安")
const count=ref(0)
function increment(){
  //声明函数
  count.value++
}
onMounted(()=>{
  //声明钩子函数
  console.log("mounted")
})

//导入Api.vue文件
import ApiVue from './Api.vue'
//然后在templates中直接使用ApiVue标签,注意必须使用自闭和，<ApiVue></ApiVue>这种不行

//导入article.vue文件
import ArticleVue from './Article.vue'

//导入article_api.vue文件
import articleApi from './article_api.vue'
</script>

<template>
  <!--html-->
  <!-- <h1>{{ msg }}</h1> -->
  <!-- <ApiVue/> -->

  <!-- <ArticleVue/> -->
  <articleApi/>
</template>

<style scoped>
/*样式*/
h1{
  color: red;
}
</style>
